<!-- 写真集 -->
<template>
  <div class="photo-album" @click="open_bot_app(aiUserId)">
    <div class="photo-album-list">
      <div v-for="(item, index) in albumList">
        <van-image :src="handleImagShow(item)" class="image" v-if="index < 3" preview="true">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <div class="photo-album-more" v-if="index === 3">
          <van-image :src="handleImagShow(item)" class="image">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div class="photo-album-more-text">+{{ albumList.length - 3 }}</div>
        </div>
      </div>
    </div>
    <div class="photo-album-title">Intimacy up to 15, out of print photo unlocked</div>
    <div class="photo-album-bottom">Go and check</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { open_bot_app } from '@/utils/download'
import { handleImagShow } from '../../helpers'
const props = defineProps({
  prizeMsg: {
    type: String,
    default: '',
  },
  aiUserId: {
    type: Number,
    default: 0,
  },
})

// 处理写真集的现实
const albumList = computed(() => {
  if (!props.prizeMsg) return []
  const content = JSON.parse(props.prizeMsg)
  return content.album.photos
})
</script>

<style lang="scss" scoped>
.photo-album {
  border-radius: 14px;
  width: 228px;
  background-color: rgba(20, 20, 20, 0.5);
  padding: 12px;
  margin-bottom: 16px;
  .photo-album-title {
    font-family: SF UI Text;
    font-size: 12px;
    font-weight: 400;
    line-height: 15.6px;
    text-align: left;
    margin-top: 8px;
    color: #fff;
  }
  .photo-album-list {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    .image {
      display: block;
      border-radius: 6px;
      height: 54px;
      width: 54px;
      overflow: hidden;
    }
    .photo-album-more {
      position: relative;
      .photo-album-more-text {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        border-radius: 6px;
        font-size: 14px;
        background-color: rgba(20, 20, 20, 0.5);
        color: #fff;
      }
    }
  }
  .photo-album-bottom {
    height: 34px;
    width: 100%;
    line-height: 34px;
    color: #fff;
    border-radius: 14px;
    margin-top: 12px;
    text-align: center;
    background-image: linear-gradient(115.62deg, #9259fe 16.21%, #6365ff 83.79%);
  }
}
</style>
